@font-face {
  font-family: "NunitoVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/nunito-latin-variable-wghtOnly-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "NunitoVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/nunito-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --scrollbar-width: 0px;
}
html,
body {
  font-family: "NunitoVariable", sans-serif;
  @apply min-h-screen;
}
html {
  @apply text-gray-700 dark:text-white from-orange-500 to-red-500;
}
h1,
h2 {
  font-family: "NunitoVariable", sans-serif;
}
@supports (not selector(::-webkit-scrollbar)) {
  .scrollbar-sm {
    scrollbar-color: #e2e8f0 #f8fafc;
    scrollbar-width: thin;
  }
}
.scrollbar-sm::-webkit-scrollbar {
  @apply w-2 h-2 rounded-lg bg-gray-50 dark:bg-gray-900;
}
.scrollbar-sm::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-800;
}
@supports (not selector(::-webkit-scrollbar)) {
  .scrollbar-sm-contrast {
    scrollbar-color: #f8fafc #e2e8f0;
  }
}
.scrollbar-sm-contrast::-webkit-scrollbar {
  @apply w-2 h-2 rounded-lg bg-gray-50 dark:bg-gray-800;
}
.scrollbar-sm-contrast::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-900;
}

@supports (not selector(::-webkit-scrollbar)) {
  @media (prefers-color-scheme: dark) {
    .scrollbar-sm {
      scrollbar-color: #1e293b #0f172a;
    }

    .scrollbar-sm-contrast {
      scrollbar-color: #0f172a #1e293b;
    }
  }
}

::-webkit-scrollbar {
  @apply w-3 bg-gray-50 dark:bg-gray-800 mt-4;
}
::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-900;
}
.scrollbar-contrast::-webkit-scrollbar {
  @apply w-4 bg-gray-100 dark:bg-gray-800;
}
.scrollbar-contrast::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-lg dark:bg-gray-900;
}

.gradient-image-mask {
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

.hero-image {
  transform: perspective(100rem) rotate3d(1, 1, 0, 30deg) scale(1.1);
}
.hero-image-variant {
  transition: clip-path;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
@screen md {
  .hero-image {
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg);
  }
}

@screen md {
  .hover\:hero-image:hover {
    transform: perspective(100rem) rotate3d(1, 1, 0, 25deg);
  }
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
  bottom: 3rem;
}
.icon-scroll {
  width: 2rem;
  height: 3.5rem;
  @apply border-2 border-gray-200 dark:border-gray-700 rounded-3xl hidden md:block;
}
.icon-scroll:before {
  content: "";
  width: 8px;
  height: 8px;
  @apply bg-gray-200 dark:bg-gray-700;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}
@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: perspective(100rem) rotate3d(1, -1, 0, 30deg) translateY(0px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(3rem);
  }
}
.astro-code {
  @apply !rounded-2xl !bg-gray-800 !py-3 !px-4;
}
.astro-code::-webkit-scrollbar {
  @apply w-2 h-2 rounded-lg bg-transparent;
}
.astro-code::-webkit-scrollbar-track {
  @apply m-3;
}
.astro-code::-webkit-scrollbar-thumb {
  @apply rounded-lg bg-gray-700;
}
.astro-code::-webkit-scrollbar-corner {
  @apply bg-transparent;
}
.astro-code code {
  font-family: "Fira Code", monospace !important;
  font-size: 14px !important;
  line-height: 21px !important;
  display: flex;
  flex-direction: column;
}
.prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
  &::before,
  &::after {
    content: unset !important;
  }
  @apply !bg-gray-200 !text-gray-700 !font-medium !dark:bg-gray-900 !dark:text-gray-300 !py-1 !px-2 !rounded-lg;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace !important;
}

@supports (not selector(::-webkit-scrollbar)) {
  @media (prefers-color-scheme: dark) {
    .astro-code {
      scrollbar-color: #1e293b #0f172a;
    }
  }
}

.clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow-wrap: break-word;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.icon-fill-current [data-icon] {
  fill: currentColor;
}
.icon-fill-gradient [data-icon] {
  fill: url(#gradient);
}
@screen xl {
  .endpoint-card {
    width: calc(
      100% + 2rem + 16rem + (min(1536px, (100vw - var(--scrollbar-width))) - 16rem - 16rem - 768px) /
        2
    );
  }
}
